<template>
    <div>
        <Row :gutter="12">
            <i-col span="12">
                <Row>
                    <Card>
                        <p slot="title">
                            <Icon type="person"></Icon>
                            添加用户
                        </p>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                            <FormItem label="昵称" prop="name">
                                <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                            </FormItem>
                            <FormItem label="头像" prop="avatar">
                                <Upload ref="avatar_upload" :before-upload="beforeUpload"
                                        :show-upload-list="showProgress"
                                        :on-success="uploadAvatarSuccess"
                                        :action="`${host}/admin/upload?token=${$store.state.access_token}`">
                                    <Avatar size="large" :src="formValidate.avatar_url"></Avatar>
                                </Upload>

                            </FormItem>
                            <FormItem label="手机号" prop="phone">
                                <Input v-model="formValidate.phone" placeholder="请输入手机"></Input>
                            </FormItem>
                            <FormItem label="密码" prop="password">
                                <Input type="password" v-model="formValidate.password" placeholder="请输入密码"></Input>
                            </FormItem>
                            <FormItem label="邮箱" prop="email">
                                <Input v-model="formValidate.email" placeholder="请输入邮箱"></Input>
                            </FormItem>
                            <FormItem label="会员类型" prop="role">
                                <i-select v-model="formValidate.role">
                                    <i-option v-for="item in mapRoles" :key="item.value" :value="item.value">
                                        {{ item.label }}
                                    </i-option>
                                </i-select>
                            </FormItem>
                            <FormItem label="性别" prop="sex">
                                <RadioGroup v-model="formValidate.sex">
                                    <Radio value="man" label="man">男</Radio>
                                    <Radio value="woman" label="woman">女</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="用户状态">
                                <i-switch v-model="formValidate.status" size="large">
                                    <span slot="open">启用</span>
                                    <span slot="close">禁用</span>
                                </i-switch>
                            </FormItem>
                            <FormItem>
                                <Button :loading="loading" type="primary"
                                        @click="handleSubmit('formValidate')">提交
                                </Button>
                                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置
                                </Button>
                            </FormItem>
                        </Form>
                    </Card>
                </Row>

            </i-col>
            <transition name="fade">
                <i-col v-show="formValidate.role == 'vip'" span="12">
                    <Row>
                        <Card>
                            <p slot="title">
                                <Icon type="person"></Icon>
                                详细信息
                            </p>
                            <Form ref="detailform" :model="formDetail" :rules="ruleValidate" :label-width="80">

                                <FormItem label="个人简介" prop="info">
                                    <Input v-model="formDetail.info" type="textarea"
                                           :autosize="{minRows: 2,maxRows: 5}"
                                           placeholder="请输入个人简介"/>
                                </FormItem>
                                <FormItem label="地址" prop="address">
                                    <i-input v-model="formDetail.address" placeholder="请选择地址">
                                        <Button icon="android-locate" slot="append"></Button>
                                    </i-input>
                                </FormItem>
                            </Form>
                        </Card>
                    </Row>
                </i-col>
            </transition>

        </Row>
    </div>
</template>
<script type="text/jsx">
  import axios from 'axios'
  import url from '../../config/url'
  import time from '../../libs/time'

  export default {

    name: 'user-add',

    data () {
      return {
        host: url.host,
        formValidate: {
          name: '',
          email: '',
          password: '',
          phone: '',
          sex: '',
          role: 'user',
          avatar: '',
          avatar_url: '',
          status: true
        },
        formDetail: {
          info: '',
          address: '',
          location: {},
          id_card_code: '',
          id_card_f_url: '',
          id_card_b_url: '',
          id_card_f_file: '',
          id_card_b_file: '',
        },
        showProgress: false,
        roles: [
          {
            value: 'user',
            label: '普通会员',
            hidden: false,
          },
          {
            value: 'order_admin',
            label: '订单管理员',
            hidden: false,
          },
          {
            value: 'vip',
            label: '零工师傅',
            hidden: false,
          }
        ],
        ruleValidate: {
          name: [
            {required: true, message: '姓名不能为空', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {
              pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码'
            }
          ],
          role: [
            {required: true, message: '请选择用户类型', trigger: 'change'}
          ],
          address: [
            {required: true, message: '请选择地址', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不正确', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '邮箱不能为空', trigger: 'blur'},
            {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
          ],
          city: [
            {required: true, message: '请选择城市', trigger: 'change'}
          ],
          sex: [
            {required: true, message: '请选择性别', trigger: 'change'}
          ],
          interest: [
            {required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change'},
            {type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change'}
          ],
          date: [
            {required: true, type: 'date', message: '请选择日期', trigger: 'change'}
          ],
          time: [
            {required: true, type: 'date', message: '请选择时间', trigger: 'change'}
          ],
          desc: [
            {required: true, message: '请输入个人介绍', trigger: 'blur'},
            {type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur'}
          ]
        }

      }
    },
    computed: {
      loading () {
        return this.$store.state.loading
      },
      mapRoles () {

        this.roles.map((item) => {
          if (this.$route.query.type == 'admin') {
            if (item.value == 'order_admin') {
              item.hidden = false
              this.formValidate.role = 'order_admin'
            } else {
              item.hidden = true
            }
          } else {
            if (item.value == 'order_admin') {
              item.hidden = true
            } else {
              item.hidden = false
            }
          }
        })
        return this.roles
      }
    },

    mounted () {

    },
    methods: {
      beforeUpload () {
        this.showProgress = true
        return true
      },
      uploadAvatarSuccess (response, file, fileList) {
        this.showProgress = false
        console.log(response.data)
        this.$refs.avatar_upload.clearFiles()
        if (response.status) {
          this.formValidate.avatar_url = response.data.url
          this.formValidate.avatar = response.data.file
        }

      },
      handleSubmit (name) {
        if (this.formValidate.role == 'vip') {

        } else {
          this.$refs[name].validate((valid) => {
            if (valid) {
              let data = this.formValidate
              this.$store.commit('setLoading', {loading: true})
              data.status = data.status ? 1 : 0
              $api.post(url.user, data).then((res) => {
                this.$store.commit('setLoading', {loading: false})
                if (res.status) {
                  this.$Message.success('添加成功')
                  this.$refs[name].resetFields()
                  this.$refs['detailform'].resetFields()
                }
              })
            } else {
              this.$Message.error('表单验证失败!')
            }
          })
        }

      },
      handleReset (name) {
        this.$refs[name].resetFields()
        this.$refs['detailform'].resetFields()
      }
    }
  }
</script>
<style lang="less">
    .fitter-panel {
        background: #f0f0f0;
        padding: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        p {
            font-size: 12px;
            margin-left: 12px;
            margin-right: 12px;
        }
    }

    .button-group-panel {
        margin-top: 12px;
    }

    .table-content {
        margin-top: 12px;
    }
</style>